<template>
  <div>
    <div class="sider">
      <a href="#" class="logo"
        ><img src="~@/assets/images/logo02.png" alt="logo"
      /></a>
      <div class="user_info">
        <img :src="userInfo.userPic" alt="person" />
        <span>欢迎&nbsp;&nbsp;{{ userInfo.nickname }}</span>
        <b>管理员</b>
      </div>
      <!-- 左侧导航栏 -->
      <div class="menu">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#323745"
          text-color="#fff"
          router
        >
          <el-menu-item index="/mainCount">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/articleList">文章列表</el-menu-item>
              <el-menu-item index="/articleRelease">发表文章</el-menu-item>
              <el-menu-item index="/articleCategory">文章类别管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="/comment">
            <i class="el-icon-document"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="user">
            <i class="el-icon-s-custom"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 顶部栏 -->
      <div class="header_bar">
        <div class="user_center_link">
          <a href="./user.html" target="main_frame">个人中心</a>
          <img :src="userInfo.userPic" alt="person" />
          <a href="javascript:void(0)" class="logout"
            ><i class="iconfont icon-tuichu"></i> 退出</a
          >
        </div>
      </div>
      <!-- 右侧主体内容 -->
      <div class="main" id="main_body">
        <!-- //路由出口 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
//导入接口
import { getUserInfo } from './home.js'
//导入mapState辅助函数
import { mapState } from 'vuex'
export default {
  name: 'index',
  data () {
    return {}
  },
  async created () {
    //1.请求数据
    let res = await getUserInfo()
    console.log(res)
    //2.存储到vuex
    this.$store.commit('updateUserInfo', res.data.data)
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style></style>
